window.onload = () => {
  // 渲染列表
  ; (function () {
    const shopList = [
      {
        id: 1,
        name: '商品1',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 2,
        name: '商品2',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 3,
        name: '商品3',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 4,
        name: '商品4',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 5,
        name: '商品5',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 6,
        name: '商品6',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 7,
        name: '商品7',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 8,
        name: '商品8',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 9,
        name: '商品9',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 10,
        name: '商品10',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 11,
        name: '商品11',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 12,
        name: '商品12',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 13,
        name: '商品13',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 14,
        name: '商品14',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      }, {
        id: 15,
        name: '商品15',
        price: 123, // 价格
        income: 10, // 推广
        cover: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.etoTP4quxezx4erjbv036wHaGS?w=222&h=188&c=7&r=0&o=5&dpr=2&pid=1.7'
      },
    ]

    const num = Math.random() * (shopList.length - 6) | 0
    const renderShopList = shopList.slice(num, 6 + num)

    // 渲染列表
    const domEl = document.querySelector('#promotion .promotion-left')
    const vDom = document.createDocumentFragment()
    renderShopList.forEach(item => {
      const divEl = document.createElement('div')
      divEl.className = 'shop-list'
      divEl.innerHTML = ` 
          <div class="cover">
            <img src="${item.cover}" alt="" />
          </div>
          <div class="title">
            ${item.name}
          </div>
          <div class="info">
            <div class="price">￥ ${item.price}</div>
            <div class="ck">
              推
              <div class="num">￥${item.income}</div>
            </div>
          </div>
      `
      divEl.querySelector('.ck').addEventListener('click', () => {
        promotion(item, item.income)
      }, false)
      vDom.appendChild(divEl)
    })
    domEl.append(vDom)


    const hotNum = Math.random() * (shopList.length - 3) | 0
    const renderHotShopList = shopList.slice(hotNum, 3 + hotNum)

    // 渲染最新热推
    const hotDom = document.querySelector('#promotion .promotion-right .shops')
    const vHotDom = document.createDocumentFragment()
    renderHotShopList.forEach(item => {
      const divEl = document.createElement('div')
      divEl.className = 'shop-list'
      divEl.innerHTML = ` 
          <div class="cover">
            <img src="${item.cover}" alt="" />
          </div>
          <div class="info">
            <div class="name">${item.name}</div>
            <div class="ck">
              推
              <div class="num">¥${item.income}</div>
            </div>
          </div>
      `
      divEl.querySelector('.ck').addEventListener('click', () => {
        promotion(item, item.income)
      }, false)
      vHotDom.appendChild(divEl)
    })
    hotDom.append(vHotDom)

    promotionShowData()
    promotionLogin({ id: 1, name: 'user' })

  })()
}